<!--
 * @description: 导演反馈
 * @fileName: DirectorFeedback
 * @author: 17076
 * @date: 2025/3/14-上午11:16
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOption"
  >
    <div slot="content">
      <el-tabs v-model="activeTab" @tab-click="queryDirectorFeedbackList">
        <el-tab-pane label="最新反馈" name="0" />
        <el-tab-pane label="历史反馈" name="1" />
      </el-tabs>
      <div v-if="activeTab === '0'" :style="{ height: $baseTableHeight(60) + 'px', overflow: 'auto' }">
        <el-row v-if="lensList.length > 0" :gutter="10">
          <el-col v-for="(item, index) in lensList" :key="index" :span="6">
            <div class="flex-column lens-item">
              <el-image :src="downloadUrl + item.fileId" />
              <div class="flex-column item-bottom">
                <span>{{ item['commentText'] }}</span>
                <el-button plain @click.stop="handleUpdate(item)">修改</el-button>
              </div>
              <span class="lens-tag">{{ item['commentTypeName'] }}</span>
            </div>
          </el-col>
        </el-row>
        <el-empty v-else description="暂无反馈数据" style="height: 100%">
          <template slot="image">
            <img src="@/assets/common/empty_role.png"/>
          </template>
        </el-empty>
      </div>
      <div v-else :style="{ height: $baseTableHeight(60) + 'px', overflow: 'auto' }">
        <template v-if="feedbackHistory.length > 0">
          <div v-for="(item) in feedbackHistory" :key="item.id" class="history-item">
            <p>{{ item['time'] }}</p>
            <el-row :gutter="10">
              <el-col v-for="subItem in item['lensList']" :key="subItem.id" :span="6">
                <div class="flex-column lens-item">
                  <el-image :src="downloadUrl + subItem.fileId" />
                  <div class="item-bottom">
                    <span>{{ subItem['commentText'] }}</span>
                  </div>
                  <span class="lens-tag">{{ subItem['commentTypeName'] }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        <el-empty v-else description="暂无历史反馈数据" style="height: 100%">
          <template slot="image">
            <img src="@/assets/common/empty_role.png"/>
          </template>
        </el-empty>
      </div>
    </div>
  </cs-dialog>
</template>

<script>
import { selectComment } from '@/api/director'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { baseURL } from '@/config'
export default {
  name: 'DirectorFeedback',
  props: {
    playId: {
      type: String || Number,
      default: ''
    }
  },
  data() {
    return {
      dialogOption: {
        top: '100px',
        width: '55%',
        title: {
          title: '导演反馈'
        },
        hiddenFooter: true,
        show: false
      },
      activeTab: '0',
      lensList: [],
      feedbackHistory: [],
      downloadUrl: baseURL + commonDownloadFile
    }
  },
  methods: {
    show() {
      this.dialogOption.show = true
      this.queryDirectorFeedbackList()
    },
    // 获取导演反馈列表
    queryDirectorFeedbackList() {
      selectComment({ playId: this.playId, status: this.activeTab }).then(res => {
        if (this.activeTab === '0') {
          this.lensList = res.data
        } else {
          this.feedbackHistory = res.data
        }
      })
    },
    // 修改
    handleUpdate(item) {
      this.$emit('update', item)
      this.dialogOption.show = false
    }
  }
}
</script>

<style scoped lang="scss">
.history-item {
  color: #FFFFFF;
}
.lens-item {
  position: relative;
  width: 100%;
  color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  .item-bottom {
    background: #272C36;
    padding: 10px;
    box-sizing: border-box;
    span {
      font-size: 12px;
    }
    .el-button {
      margin-top: 10px;
    }
  }
  .el-image {
    width: 100%;
    height: 140px;
  }
  .lens-tag {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 12px;
    color: black;
    background: #FFFFFF;
    border-radius: 3px;
    padding: 5px 8px;
    text-align: center;
  }
}
::v-deep {
  .dialog-content {
    overflow-y: hidden;
  }
}
</style>
